<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
        <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=8ydQIrrN6ton0OXQ8u5G89IZhokcYNUj"></script>
    </head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="contetn_box">
                <div class="form_box">
                    <div class="form_item">
                        <div class="form_name">省份</div>
                        <div class="form_cont">
                            <el-select @change="provinceChange" class="public_input" v-model="provinceId" clearable placeholder="">
                                <el-option
                                    v-for="item in province"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form_item">
                        <div class="form_name">城市</div>
                        <div class="form_cont">
                            <el-select @change="citychange" class="public_input" v-model="cityId" clearable placeholder="">
                                <el-option
                                    v-for="item in cityObj[provinceId]"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form_item">
                        <div class="form_name">详细地址</div>
                        <div class="form_cont">
                            <el-input class="public_input" placeholder="" v-model="addressDetail" clearable> </el-input>
                        </div>
                    </div>
                    <div class="form_but" style="margin-left: 20px;">
                        <el-button @click="searchBut" class="border_but" type="primary">查询</el-button>
                    </div>
                </div>
                <div id="allmap" style="height: calc(100% - 52px);width: 100%;"></div>
            </div>
            <div class="but_box">
				<el-button @click="cancels" class="cancelClass">取消</el-button>
				<el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
            </div>
        </div>
        <script src="../js/area.js"></script>
		<script src="../js/public.js?1234"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        map: "",
                        province: [],
                        cityObj: {},
                        allCity: {},
                        mapCity: '',
                        addressDetail: '',
                        provinceId: '',
                        cityId: '',
                        local: '',
                        lightPoint: false,
                        newmarker: '',
                        selectObj: {}
					};
				},
				methods: {
                    provinceChange () {
                        this.cityId = ''
                    },
                    citychange () {
                        this.map.centerAndZoom(this.allCity[this.cityId], 12);
                    },
                    searchBut () {
                        this.local.clearResults()
                        this.map.clearOverlays();
                        this.selectObj = {}
                        if (this.addressDetail) {
                            this.local.search(this.addressDetail, {
                                forceLocal: false
                            });
                        }
                    },
                    initMap() {
                        var that = this
                        var ResultArray = []
                        var map = new BMap.Map('allmap'); // 创建Map实例
                        // 初始化地图,设置中心点坐标和地图级别
                        map.centerAndZoom(this.mapCity, 16);
                        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                        var geoc = new BMap.Geocoder({extensions_town: true});
                        map.addEventListener("click", function(e) {
                            console.log(e)
                            geoc.getLocation(e.point, function(rs){
                                console.log(rs)
                            })
                        });
                        this.local = new BMap.LocalSearch(map, {
                            pageCapacity: 50,
                            onSearchComplete: function (results) {
                                var totalResults = results.getNumPois();
                                var totalPages = results.getNumPages();
                                var currPage = results.getPageIndex();
                                for (i = 0; i < results.getCurrentNumPois(); i++) {
                                    ResultArray[50 * currPage + i] = results.getPoi(i);//在当前页面下获取页面中的内容
                                }
                                if (results.getPageIndex() < results.getNumPages() - 1) {
                                    that.local.gotoPage(results.getPageIndex() + 1);
                                }
                                else {
                                    that.map.clearOverlays();
                                    for (var i = 0; i < ResultArray.length; i++) {
                                        that.addMarker(ResultArray[i].point.lat, ResultArray[i].point.lng, ResultArray[i])
                                    }
                                }
                            }
                        });
                        this.map = map;
                    },
                    addMarker(latitude, longitude, params) {
                        var that = this;
                        var point = new BMap.Point(longitude, latitude);
                        var myicon = new BMap.Icon('../img/icon4.png', new BMap.Size(40, 40));
                        var marker = new BMap.Marker(point, { icon: myicon });
                        // marker.addEventListener('mouseover', function(e) {
                        //     console.log(13456)
                        //     marker.setLabel
                        // })
                        // marker.addEventListener('mouseout', function(e) {
                        //     console.log(789)
                        // })
                        marker.setTitle(params.title)
                        marker.addEventListener('click', function(e) {
                            if(e && e.stopPropagation) { //非IE 
                                    e.stopPropagation(); 
                            } else { //IE 
                                window.event.cancelBubble = true; 
                            } 
                            if (that.lightPoint) {
                                that.selectObj = {}
                                that.map.removeOverlay(that.newmarker)
                            }
                            var point = new BMap.Point(e.target.point.lng, e.target.point.lat)
                            var lightMyIcon = new BMap.Icon('../img/icon5.png', new BMap.Size(40, 40));
                            that.newmarker = new BMap.Marker(point, {icon: lightMyIcon});
                            that.newmarker.setTitle(params.title)
                            that.map.addOverlay(that.newmarker);
                            that.lightPoint = true
                            that.selectObj = params
                        });
                        this.map.addOverlay(marker);
                    },
                    cancels () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    confirms () {

                    },
                    setAddresArr () {
                        var addres = ADDRESS
                        var province = []
                        var cityObj = {}
                        var allCity = {}
                        var flag = true
                        for (var i in addres[0]) {
                            province.push({
                                id: 0 + ',' + i,
                                name: addres[0][i]
                            })
                            cityObj[0 + ',' + i] = []
                            for (var j in addres[0 + ',' + i]) {
                                cityObj[0 + ',' + i].push({
                                    id: 0 + ',' + i + ',' + j,
                                    name: addres[0 + ',' + i][j]
                                })
                            }
                            for (var j in addres[0 + ',' + i]) {
                                allCity[0 + ',' + i + ',' + j] = addres[0 + ',' + i][j]
                                if (addres[0 + ',' + i][j] == this.mapCity) {
                                    this.provinceId = 0 + ',' + i
                                    this.cityId = 0 + ',' + i + ',' + j
                                    flag = false
                                }
                            }
                        }
                        if (flag) {
                            this.provinceId = '0,110000'
                            this.cityId = '0,110000,110100'
                            this.mapCity = '北京市'
                        }
                        this.province = province
                        this.cityObj = cityObj
                        this.allCity = allCity
                        this.initMap()
                    },
				},
				mounted() {
                    this.showApp = true;
                    this.mapCity = decodeURIComponent(getQuerys('mapCity'))
                    this.setAddresArr()
				}
			});
		</script>
	</body>
	<style>
		.contetn_box {
            height: calc(100% - 80px);
            position: relative;
        }
        .form_box {
            display: flex;
            align-items: center;
            padding: 10px 30px;
        }
        .form_item {
            display: flex;
            align-items: center;
        }
        .form_name {
            padding-left: 20px;
            padding-right: 10px;
            white-space: nowrap;
        }
	</style>
</html>
